import React,{useRef,useState} from 'react';
import {Top,SelectContext,SelectItem} from "./SetMenu.style"

const SetMenu = (props) => {
    const { display,selectMenu=[]} = props;
    // console.log(display,'display');
    const [currentIndex,setIndex]=useState(0)

    const changeIndex=(index)=>{
        // console.log(index,'dianji');
        setIndex(index)
    }
    return (
        <>
        <Top style={display===0?{display:'none'}:{}}>
             <SelectContext >
                {selectMenu.map((item,index) => {
                    // console.log(item,index);
                    return (
                        <SelectItem key={index} onClick={changeIndex.bind(this,index+1)}>
                            <div className={item.id==currentIndex?'active-title':'title'} >{item.title}</div>
                            <div className={item.id==currentIndex?'active-notes':'notes'}>{item.notes}</div>
                        </SelectItem>
                    )
                })}
            </SelectContext>
            </Top>    
        </>
    )
}
export default SetMenu;